<template>
  <div class="role-box">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="id" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="username" label="账号"> </el-table-column>
      <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="toDetail(scope)">详情</el-button>
          </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getRoleList } from "@/api";
export default {
  created() {
    this.getList();
  },
  data() {
      return {
          tableData: []
      }
  },
  methods: {
    // 获取角色列表
    getList() {
      getRoleList().then((res) => {
          this.tableData = res.data
      });
    },
    toDetail(scope) {
        this.$router.push({name: `Detail`, params: {id: scope.row.id}})
    }
  },
};
</script>

<style lang="scss" scoped>
.role-box {
    width: 100%;
}
</style>